<template>
  <a-card :bordered="false" style="height: 100%; overflow-y: auto;">
    <a-form-model
      ref="queryForm"
      class="query-form"
      layout="inline"
      :model="queryParam"
      @keyup.enter="loadData(1)"
    >
      <a-form-model-item class="form-item" prop="softServerId">
        <a-input placeholder="服务代码" v-model="queryParam.softServerId" @keyup.enter="searchQuery"/>
      </a-form-model-item>
      <a-form-model-item class="form-item" prop="softServerName">
        <a-input placeholder="服务名称" v-model="queryParam.softServerName" @keyup.enter="searchQuery"/>
      </a-form-model-item>
      <a-form-model-item class="form-item" prop="supplierId">
        <a-input placeholder="供应商代码" v-model="queryParam.supplierId" @keyup.enter="searchQuery"/>
      </a-form-model-item>
      <a-form-model-item class="form-item" prop="supplierName">
        <a-input placeholder="供应商名称" v-model="queryParam.supplierName" @keyup.enter="searchQuery"/>
      </a-form-model-item>
      <a-form-model-item class="form-item" label="账单生成时间：">
        <a-range-picker format="YYYY/MM/DD"  style="width:240px" @change="timeSelect" v-model="queryParam.selectedTime" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button-group style="margin-right:12px">
          <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          <a-button @click="searchReset" icon="reload">重置</a-button>
        </a-button-group>
        <a-select :default-value="0" v-model="exportType" style="width: 165px; margin-right:12px">
          <a-select-option :value="0">导出全部</a-select-option>
          <a-select-option :value="1">导出所选数据项</a-select-option>
          <a-select-option :value="2">导出所有搜索结果项</a-select-option>
        </a-select>
        <a-button @click="exportData" icon="export" :loading="exporting" style="margin-right:12px">导出</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-spin :spinning="loading">
      <a-table
        bordered
        :columns="columns"
        :row-selection="{ selectedRowKeys: rowSelected, onChange: onSelectChange }"
        :pagination="ipagination"
        :data-source="dataSource"
        rowKey="tspOrderId"
        style="margin-top: 36px"
        @change="handleTableChange"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="TimeDeal" slot-scope="text, record">
          {{ !!text ? $commonFun.getDateTimeStr(text) : '-' }}
        </span>
        <span slot="createTime" slot-scope="text, record">
          {{ !!text ? $commonFun.getDateTimeStr(text) : '-' }}
        </span>
        <span slot="orderBeginTime" slot-scope="text, record">
          {{ !!text ? $commonFun.getDateTimeStr(text) : '-' }}
        </span>
        <span slot="orderEndTime" slot-scope="text, record">
          {{ !!text ? $commonFun.getDateTimeStr(text) : '-' }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="checkBtn(record, 'view')" style="margin-right: 6px">
            预览
          </a-button>
          <a-button type="primary" @click="checkBtn(record, 'edit')">编辑</a-button>
        </span>
      </a-table>
    </a-spin>
  </a-card>
</template>
<script>
import { mapState } from 'vuex'
import { downloadBlobFile } from '@/utils/functions'
import statement from '@/api/modules/system/statement'

export default {
  name: 'StateMent',
  data () {
    return {
      queryParam: {
        softServerId: '',
        softServerName: '',
        supplierId: '',
        supplierName: '',
        startCreateTime: '',
        endCreateTime: '',
        selectedTime: []
      },
      loading: false,
      exporting: false,
      exportType: 0,
      rowSelected: [],
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      nowTime: 156789,
      columns: [
        {
          title: '车型',
          dataIndex: 'modelName',
          align: 'center'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          align: 'center'
        },
        {
          title: '匿名ID',
          dataIndex: 'anonymityID',
          align: 'center'
        },
        {
          title: '购买数量',
          dataIndex: 'buyNum',
          align: 'center'
        },
        {
          title: '计费单位(月)',
          dataIndex: 'months',
          align: 'center'
        },
        {
          title: 'TPSM订单号',
          dataIndex: 'tspOrderId',
          align: 'center'
        },
        {
          title: 'SOTA订单编号',
          dataIndex: 'orderId',
          align: 'center'
        },
        {
          title: '服务开始时间',
          dataIndex: 'orderBeginTime',
          align: 'center',
          scopedSlots: { customRender: 'orderBeginTime' }
        },
        {
          title: '服务结束时间',
          dataIndex: 'orderEndTime',
          align: 'center',
          scopedSlots: { customRender: 'orderEndTime' }
        },
        {
          title: '账单生成时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' },
          align: 'center'
        },
        {
          title: '供应商订单号',
          dataIndex: 'serverOrderId',
          align: 'center'
        },
        {
          title: '供应商代码',
          dataIndex: 'supplierId',
          align: 'center'
        },
        {
          title: '供应商名称',
          dataIndex: 'supplierName',
          align: 'center'
        },
        {
          title: 'SOTA服务代码',
          dataIndex: 'softServerId',
          align: 'center'
        },
        {
          title: '服务名称',
          dataIndex: 'softServerName',
          align: 'center'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.orderManagement.queryParams
    })
  },
  methods: {
    timeSelect (date, dateString) {
      console.log(date, dateString)
      this.queryParam.startCreateTime = dateString[0]
      this.queryParam.endCreateTime = dateString[1]
    },
    onSelectChange (keys) {
      console.log(keys)
      this.rowSelected = keys
    },
    searchReset () {
      console.log('reset')
      this.$refs.queryForm.resetFields()
      this.timeSelect('', [])
      this.queryParam.selectedTime = []
      this.loadData(1)
    },
    filterObj (obj) {
      if (!(typeof obj === 'object')) {
        return
      }
      for (const key in obj) {
        if ((obj.hasOwnProperty(key) &&
          (obj[key] == null || obj[key] === undefined || obj[key] === '')) ||
          key.indexOf('selectedTime') > -1) {
          delete obj[key]
        }
      }
      return obj
    },
    searchQuery () {
      console.log(this.queryParam)
      this.loadData(1)
    },
    getQueryParams () {
      var param = Object.assign({}, this.queryParam)
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return this.filterObj(param)
    },
    loadData (arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.loading = true
      var params = this.getQueryParams()
      this.rowSelected = []
      statement.getMerchantlList(params).then(data => {
        this.loading = false
        console.log(data)
        this.ipagination.total = data.totalCount
        this.dataSource = data.data
      })
    },
    exportData () {
      console.log(this.exportType)
      if(this.exportType===1 && this.rowSelected.length==0){
        this.$message.warning('未选中')
        return
      }
      this.exporting = true
      this.queryParam.pageNo = 1
      this.queryParam.pageSize = 1000000
      var params = this.getQueryParams()
      params.pageNo = 1
      params.pageSize = 1000000
      const exportParam = this.exportType === 1 ? { tspOrderId: this.rowSelected.join(',') } : params
      statement.exportMerchantlList(exportParam).then(res => {
        downloadBlobFile(res, 'system-log.xlsx')
      }).finally(() => {
        this.exporting = false
      })
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
      this.loadData()
    }
  },
  mounted () {
    this.loadData(1)
  }
}
</script>
<style lang="less" scoped>
</style>
